<template>
<div>
    <el-row :gutter="10" style="margin-bottom:20px;">
      <el-col :span="5">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">限额查询：</span>
          <el-select
          style="width:55%"
          v-model="bankMessage.value"
          placeholder="请选择银行" 
          clearable
          @change = "bankFn"
          >
            <el-option
              v-for="item in bankMessage.options"
              :key= "item.value"
              :label="item.label"
              :value="item.value"
              
            ></el-option>
          </el-select>
      </el-col>
      <el-col :span="3">银行编号：{{this.bankMessage.value}}</el-col>
      <el-col :span="3">单笔限额：{{this.bankMessage.dbxe}}</el-col>
      <el-col :span="3">每日限额：{{this.bankMessage.drxe}}</el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom:20px;" v-if="this.$store.getters.getUserInfo.power ===2 || this.$store.getters.getUserInfo.power ===1">
        <el-col :span="5">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">用户名：</span>
          <el-input v-model="userName" placeholder="请输入用户名" style="width:55%"></el-input>
        </el-col>
        <el-col :span="5">
          <span style="width:30%;text-align:right;float:left;line-height:36px;">开始时间：</span>
            <el-date-picker
            v-model="staValue"
            type="date"
            placeholder="选择开始时间"
            style="width:55%"
            @change = "changeFn"
            >
            </el-date-picker>
        </el-col>
        <el-col :span="5">
          <span style="width:30%;text-align:right;float:left;line-height:36px;">截止时间：</span>
            <el-date-picker
            v-model="endValue"
            type="date"
            style="width:55%"
            placeholder="选择结束时间"
            @change = "changeFn"
            >
            </el-date-picker>
        </el-col>
        <el-col :span="5">
          <span style="width:30%;text-align:right;float:left;line-height:36px;">账户状态：</span>
            <el-select v-model="zhanghuState.value" placeholder="请选择" clearable style="width:55%" @change = "changeFn">
                <el-option
                v-for="item in zhanghuState.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" @click="changeFn" style="25%;">搜索</el-button>
        </el-col>
    </el-row>
    <el-table
    v-if="this.$store.getters.getUserInfo.power ===2 || this.$store.getters.getUserInfo.power ===1"
    :data="testData"
    border
    :row-class-name = "stateColor"
    style="width: 100%">
    <el-table-column
      prop="id"
      align="center"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="cU_ser"
      align="center"
      label="用户名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="cName"
      align="center"
      label="用户姓名">
    </el-table-column>
    <el-table-column
      prop="zhze"
      align="center"
      label="账户总额">
    </el-table-column>
    <el-table-column
      
      align="center"
      label="证书文件">
      <template slot-scope="scope">
          <span @click="lookPic(scope.row)">{{scope.row.zswj}}</span>
          
      </template>  
      
    </el-table-column>
    <el-table-column
      prop="tDate"
      align="center"
      label="上传时间">
    </el-table-column>
    <el-table-column
      prop="fShzt"
      align="center"
      label="状态">
    </el-table-column>
  </el-table>
    <div class="pagerBox" v-if="this.$store.getters.getUserInfo.power ===2 || this.$store.getters.getUserInfo.power ===1">
        第{{currentPage}}页
        <span class="pager" @click="prev">上一页</span>
        <span class="pager" @click="next">下一页</span>
    </div>
    <el-dialog title="银行卡审核" :visible.sync="dialogTableVisible">
      <el-button type="primary" @click="handlePass">通过</el-button>
      <el-button @click="showjujue">拒绝</el-button>
      <el-button type="primary" style="float:right" @click="showyhkjl">银行卡审核记录</el-button>
      <img  :src="picPath.cBbzmtp" style="width:100%;"/>
      <img  :src="picPath.cGszmtp" style="width:100%;"/>
      <img  :src="picPath.cSfztp" style="width:100%;"/>
    </el-dialog>
    <el-dialog title="银行卡审核记录" :visible.sync="yhkjl.dialog">
        <el-table
          :data="yhkjl.tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="tShsj"
            label="时间"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="fShzt"
            label="状态"
            min-width="100">
            <template slot-scope="scope">
                {{scope.row.fShzt === -1 ? '拒绝' : scope.row.fShzt === 0 ? '待审核' : '通过'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="cShbz"
            label="原因"
            min-width="100">
          </el-table-column>
        </el-table>
        <div style="margin: 30px 0;">
          <el-pagination
          @current-change="handleCurrentChange"
          :page-size="yhkjl.pageSize"
          layout="prev, pager, next, jumper"
          :total="yhkjl.total">
          </el-pagination>
        </div>
    </el-dialog>
    <el-dialog title="拒绝理由" :visible.sync="jujueDialogVisible">
        <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="jujuetextarea">
        </el-input>
      <el-button type="primary" @click="isPass(-1)">提交</el-button>
    </el-dialog>
</div>  
</template>
<script>
import { dateFormat } from 'vux'
export default {
  data(){
      return{
          yhkMessageDialogVisible: false,
          jujueDialogVisible: false,
          jujuetextarea: '',
          userName:'',
          userid:'',
          jiluid:'',
          dialogTableVisible:false,//查看证件图片弹窗
          picPath:{},
          yhk: null,
          yhkselect: [],
          yhkjl:{
            dialog: false,
            tableData:[],
            total: 0,
            pageSize: 20,
          },
          currentPage:1,
          testData:[],
          page:1,
          pageSize:15,
          staValue:'',//开始时间
          endValue:'',//截止时间
          zhanghuState:{
              value:'',
              options:[
                  {value:0,label:'待审核'},
                  {value:1,label:'已通过'},
                  {value:-1,label:'未通过'}
              ]
          },
          bankMessage:{
            value:'',
            dbxe:'',
            drxz:'',
            options:[
              {value:'ICBC',label:'中国工商银行'},
              {value:'ABC',label:'农业银行'},
              {value:'BOC',label:'中国银行'},
              {value:'CCB',label:'建设银行'},
              {value:'BOCOM',label:'交通银行'},
              {value:'CMBC',label:'民生银行'},
              {value:'CMB',label:'招商银行'},
              {value:'CEB',label:'光大银行'},
              {value:'CIB',label:'兴业银行'},
              {value:'SPDB',label:'上海浦东发展银行'},
              {value:'BOS',label:'上海银行'},
              {value:'SDB',label:'深圳发展银行'},
              {value:'BJRCB',label:'北京农村商业银行'},
              {value:'BCCB',label:'北京银行'},
              {value:'CBHB',label:'渤海银行'},
              {value:'CITIC',label:'中信银行'},
              {value:'CZB',label:'浙商银行'},
              {value:'GDB',label:'广发银行'},
              {value:'HKBEA',label:'东亚银行'},
              {value:'HXB',label:'华夏银行'},
              {value:'HZCB',label:'杭州银行'},
              {value:'NJCB',label:'南京银行'},
              {value:'PINGAN',label:'平安银行'},
            ]
          }
      }
  },
  
  methods:{
    bankFn(){
      this.bankMessage.drxe = ''
      this.bankMessage.dbxe = ''
      this.$get(this,{
        api:"/bank/bankCardLimit.do",
        data:{
          OpenBankId:this.bankMessage.value
        }
      }).then((data)=>{
        
        if(!data.data.state){
          this.bankMessage.drxe = data.data.content[0].CardDailyTransQuota
          this.bankMessage.dbxe = data.data.content[0].SingleTransQuota
        }
      })
      
    },
    showjujue () {
        this.jujueDialogVisible = true;
    },
    getShenFen () {
      this.$get(this,{api:'member/bankCheck.do',data: {
        fUid:this.userid
      }
      }).then(({data})=>{
        if (data.state === 0) {
          this.picPath= data.content;
        } else {
        }
      })
    },
    isPass (ispass) {
        if (ispass === -1) {
            if (this.jujuetextarea === '') {
                return this.$warn('请输入内容！')
            }
        }
      this.$get(this,{api:'member/passCheck.do',data: {
        shuid: this.$store.getters.getUserInfo.id,
        intid: this.jiluid,
        cShbz: this.jujuetextarea,
        ispass
      }
      }).then(({data})=>{
        if (data.state === 0) {
          this.dialogTableVisible = false;
          this.jujueDialogVisible = false;
          this.$message({
            message: '提交成功！',
            type: 'success'
          });
          this.getBankTest()
          this.jujuetextarea = '';
           //this.getShenFen()
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    async handlePass(){//点击通过按钮
      const _vm = this
      this.$vux.confirm.show({
        content:'确认通过？',
        onConfirm(){
          _vm.isPass(1)
        }
      })
    },
    showyhkjl () {//点击银行卡记录
        this.yhkjl.dialog = true;
        this.getyhkjl()
    },
    getyhkjl (page = 1) {//获取弹窗里面点击银行卡记录的数据
      this.$get(this,{api:'member/bankRecord.do',data: {
        fUid:this.userid,
        pageSize: this.yhkjl.pageSize,
        page
      }
      }).then(({data})=>{
        if (data.state === 0) {
            this.yhkjl.tableData = data.content.data;
            this.yhkjl.total = data.content.num;
        } else {
        }
      })
    },
      lookPic(item){//点击查看证件
          this.$get(this,{
              api:'member/bankCheck.do?',
              data:{
                  fUid : item.fUid
              }
          }).then((data)=>{
              //用户id
              this.userid = item.fUid
              //当前这条数据记录id
              this.jiluid = data.data.content.id
              this.picPath.cBbzmtp = data.data.content.cBbzmtp
              this.picPath.cGszmtp = data.data.content.cGszmtp
              this.picPath.cSfztp = data.data.content.cSfztp
              this.dialogTableVisible = true
          })
          
          
      },
      stateColor(row,index){//渲染不同状态颜色
          if(row.fShzt ==='未通过'){
              return 'red'
          }else if(row.fShzt ==='待审核'){
              return 'blue'
          }
      },
      changeFn(){//筛选项改变时，刷新表格数据
          this.getBankTest(1)
      },
      //获取表格信息
      getBankTest(item){
          let pageNum
          let newState
          if(!item){
                pageNum = this.page
            }else{
                pageNum = item
            }
          if(this.zhanghuState.value ==0 || this.zhanghuState.value){
              newState = this.zhanghuState.value
          }
          this.$get(this,{
              api:'manage/findBankCheckList.do',
              data:{
                  st:this.staValue && dateFormat(this.staValue, 'YYYY-MM-DD'),
                  et:this.endValue && dateFormat(this.endValue, 'YYYY-MM-DD'),
                  yhksh: newState,
                  yh:this.userName || '',
                  page:pageNum,
                  pageSize:this.pageSize

              }
          }).then((data)=>{
              this.testData=data.data.content.data
          })
      },
      handleCurrentChange(val) {
        val = Number.parseFloat(val)
        if(Number.isNaN(val)){
          this.$toast({
            message: '请输入页码'
          })
          return
        }
        if(val < 1 ){
          this.$toast({
            message: '已经是第一页了'
          })
          return
        }else if(val > this.currentPage && this.testData.length < this.pageSize){
          this.$toast({
            message: '后面没内容了'
          })
          return
        }
        
        this.currentPage = val
        this.getBankTest(val)
        
        
      },
      prev () {
        this.handleCurrentChange(this.currentPage - 1)
      },
      next () {
        this.handleCurrentChange(this.currentPage + 1)
      }
  },
  mounted(){
      this.getBankTest()
  }
}
</script>
<style>
.pagerBox{
    margin:15px 0; float:right;font-size:14px;
  }
 .pager {
    width: 100px;
    line-height: 20px;
    border: 1px solid #d1dbe5;
    color: #48576a;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border-radius: 10px;
    font-size:14px;
  }
  .red td:nth-child(7) .cell{
      color:red;
  }
  .blue td:nth-child(7) .cell{
      color:blue;
  }
  .el-table td:nth-child(5) .cell{
      color:blue;
      text-decoration: underline;
  }
</style>


